<template>
  <div class="box">
    <div class="back">
      <span @click="goBack"
        ><img src="../../assets/icon/left.svg" alt=""
      /></span>
      <span class="back-mation">个人信息</span
      ><span @click="confirm">完成</span>
    </div>
    <div class="head">
      <img :src="src" alt="" v-if="isShow" />
      <van-uploader :after-read="afterRead" v-if="isImg" />
    </div>
    <div class="nformation">
      <section>
        <p>
          <span>昵称</span>
          <input placeholder="请输入" style="direction: rtl" v-model="v1" />
        </p>
        <p>
          <span>手机号</span
          ><input
            type="text"
            placeholder="请输入"
            style="direction: rtl"
            v-model="v2"
          />
        </p>
        <p>
          <span>个性签名</span
          ><input
            type="text"
            placeholder="请输入"
            style="direction: rtl"
            v-model="v3"
          />
        </p>
      </section>
      <section>
        <p><span>姓名</span> <span>李华聪</span></p>
        <p><span>性别</span><span>男</span></p>
        <p><span>年龄</span><span>20</span></p>
        <p><span>星座</span><span>摩羯座</span></p>
        <p><span>籍贯</span><span>深圳市西乡</span></p>
      </section>
      <section>
        <p>
          <span>婚姻状况</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
        <p>
          <span>所在地</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
        <p>
          <span>邮箱</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
      </section>
      <section>
        <p>
          <span>学历</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
        <p>
          <span>毕业院校</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
        <p>
          <span>专业</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
        <p>
          <span>职业</span
          ><input type="text" placeholder="请输入" style="direction: rtl" />
        </p>
      </section>
    </div>
    <router-view />
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import { Notify } from "vant";

export default {
  data() {
    return {
      src: "",
      isShow: false,
      isImg: true,
      v1: "",
      v2: null,
      v3: "",
    };
  },

  methods: {
    ...mapMutations(["amend"]),
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.src = file.content;
      this.isShow = !this.isShow;
      this.isImg = !this.isImg;
      // console.log(this.src);
    },
    // 返回上一级 没有保存信息
    goBack() {
      this.$router.go(-1);
    },
    // 确认信息  保存信息
    confirm() {
      let m = {};
      // if (this.v1 || this.v2 || this.v3 == "") {
      //   Notify("请输入信息再确认!");
      //   return;
      // }
      // else{
      m.v1 = this.v1;
      m.v2 = this.v2;
      m.v3 = this.v3;
      m.portrait = this.src;
      this.amend = m;
      localStorage.setItem("message", JSON.stringify(m));
      this.$router.push({ path: "/home/sonHome" });
      // }
    },
  },
  created() {
    let m = JSON.parse(localStorage.getItem("message"));
    if (m) {
      this.v1 = m.v1;
      this.v2 = m.v2;
      this.v3 = m.v3;
    }
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  /deep/.van-nav-bar__text {
    color: black;
  }
  .back {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    img {
      width: 16px;
      margin-top: 3px;
    }
    .back-mation {
      margin-left: 20px;
    }
  }
  .head {
    width: 22%;
    height: 80px;
    margin: 20px auto;
    //   border: 1px solid black;
    position: relative;
    border-radius: 30%;
    overflow: hidden;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 10;
    }
  }
  .nformation {
    background-color: #f5f5f5;
    section {
      background-color: white;
      p {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        font-size: 16px;
        margin-left: 10px;
        padding: 7px 0;
        line-height: 15px;
        span {
          margin-right: 15px;
          font-weight: bold;
          padding: 5px 0;
        }
        input {
          width: 150px;
          height: 15px;
          border: 0px;
          font-size: 14px;
          margin-right: 15px;
          line-height: 15px;
        }
      }
    }
  }
}
</style>